@media (min-width: 1200px) {
  .container {
    max-width: 1040px;
  }
}

.box-container {
  display: inline-block;
  margin: 0;
  padding: 0;
  margin-top: 1.4em;
  width: 100%;
}

.box {
  list-style-type: none;
  float: left;
  opacity: 1;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.2s, transform 0.35s;
}

.box.show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.4s, transform 0.35s;
}

.box .inner {
  padding: 10px;
  position: relative;
}

.box a {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.box img {
  width: calc(100% + 50px);
  max-width: calc(100% + 50px);
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-40px, 0, 0);
}

.box a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.4s;
}

.three-cols .box {
  width: 100%;
}

@media (min-width: 390px) {
  .three-cols .box {
    width: 50%;
  }
}

@media (min-width: 576px) {
  .intro h1 {
    font-size: 4.3em;
  }

  .intro {
    max-height: 70vh;
    min-height: 640px;
    padding-top: 0px;
  }

  .intro h1,
  .tagline {
    text-align: left;
  }

  .tagline {
    font-size: 100%;
  }

  .three-cols .box {
    width: 33.3%;
  }

  .three-cols .box:nth-child(3n + 0) {
    margin-right: 0;
  }

  .three-cols .box:nth-child(3n + 1) {
    margin-left: 0;
  }

  .mcbutton {
    width: auto;
  }
}

@media (min-width: 992px) {
  .box:hover img {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.35s, transform 0.35s;
  }

  .box:hover a::before {
    opacity: 0.3;
    transition: opacity 0.5s;
  }
}

/* path {
    stroke-opacity: 0;
}

path.hw {
    stroke-opacity: 1;
}
 */

/* Mobile Full Screen Lightbox Styles */
@media (max-width: 768px) {
  .glightbox-container {
    height: 100vh;
    width: 100vw;
  }

  .glightbox-container .gslide {
    height: 100vh;
    width: 100vw;
  }

  .glightbox-container .gslide-image {
    max-height: 100vh;
    max-width: 100vw;
    object-fit: contain;
  }

  .glightbox-container .gslide-description {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px;
    color: white;
  }

  .glightbox-container .gclose {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
  }

  .glightbox-container .gnext,
  .glightbox-container .gprev {
    width: 40px;
    height: 40px;
  }
}